<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="box" v-if="infor">
                <div class="appTitle">
                    卡券购买详情
                </div>
                <el-form label-width="120px" ref="ruleForm" label-position="right">
                        <div>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="学校：">
                                        <span>{{infor.sSchoolName}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="商品名称：">
                                        <span>{{infor.sServiceName}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="当前收费：" >
                                        <span v-if="infor.sType=='1'" >
                                            {{infor.timestore}}个月（{{infor.sCardMoney}}元）
                                        </span>
                                        <span v-if="infor.sType=='2'" >
                                            {{infor.timestore=='0.5'?'半':infor.timestore}}年（{{infor.sCardMoney}}元）
                                        </span>
                                    </el-form-item>
                                </el-col>                           
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="当前分成比例：">
                                        <span>{{payRecord.sDividedPercentage}}%</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="数量：">
                                        <span>{{infor.sCardCouponsNum}}张</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="线下应付款：">
                                        <span>{{infor.sOrderMoney}}元</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col>
                                    <el-form-item label="活动价格：">
                                        <span>{{infor.sShouldPayMoney}}元</span>
                                    </el-form-item>
                                </el-col>
                            
                            </el-row>
                        </div>
                    <el-form-item class="footer">
                        <el-button @click="$router.push({path:'/cardCoupons/buyRecord'})">返回</el-button>
                    </el-form-item>              
                </el-form>
            </div>
        </div>
  </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import { getCouponPurchaseDetails } from 'api/cardCoupons';
export default {
    name: 'buyCheckDetail',
    components: {Levelbar},
    data() {
        return {
            infor: null,
            payRecord: null,
            isDisabledOne: false,
            isDisabledTwo: false
        }
    },
    created() {
        this.getDetail();// 卡券购买记录详情
    },
    methods: {
        getDetail() {
            let pId=this.$route.params.pId;
            getCouponPurchaseDetails(pId).then(res => {
                res.data.content.payRecord.sNewTimeNum =JSON.parse(res.data.content.payRecord.sNewTimeNum);
                this.infor=res.data.content.cardCoupons;
                this.payRecord=res.data.content.payRecord;
               
            })
        }
    }
    
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .content{
        padding: 0 50px;
        background: #fff;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        .box {
            padding-bottom: 10px;
            .appTitle {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .el-form {
                padding-Top: 30px;
                background: #fff;
                span{
                    color: rgb(61, 41, 31)
                }
            }
        }
    }
}

.footer{
    text-align: center;
    position: relative;
    margin-left:-100px;
}
</style>


